<template>
  <div class="supplier-info-wrap">
    <Title title="解约信息" style="font-size:16px;margin:16px 0 10px 0"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="8">
          <el-form-item label="解约单号：">
            <ToolTip :content="data.cancelNum"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="解约日期：">
            <ToolTip :content="data.terminationTime | format('YYYY/MM/DD')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <CheckUserInfo :user-id="data.createUserId" :label="data.createUser" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门：">
            <ToolTip :content="data.department"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <ToolTip :content="data.createTime | format('YYYY/MM/DD HH:mm')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="解约说明：">
            <ToolTip :content="data.terminationExplain"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件：">
            <FileShowList v-if="data.attachment" :file-list="data.attachment" style="max-width:100%;" is-show-single-file/>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="补充说明：">
            <ToolTip :content="data.explain"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { format } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  components: { Title, FileShowList },
  filters: {
    format,
    formatExplain(val) {
      return {
        0: '合约未到期 - 主动解约',
        1: '合约未到期 - 被动解约',
        2: '合约到期 - 试合作期满解约',
        3: '合约到期 - 正式合作期满解约',
        4: '特殊解约 - 特殊被动解约',
        5: '特殊解约 - 特殊主动解约',
        6: '特殊解约 - 其他特殊情况'
      }[val];
    }
  },
  props: {
    data: {// 详情信息
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>
<style lang="scss" scoped>
  .supplier-info-wrap{
    .supplier-form {
      & ::v-deep {
        .el-form-item {
            .el-form-item__label {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999 !important;
              opacity: 1;
              line-height: 30px;
            }
          }
          .el-form-item__content {
            font-size: 14px;
            font-family: PingFang SC;
            line-height: 30px;
            font-weight: 400;
            color: #333333;
            opacity: 1;
          }
      }
    }
    .dividing{
      &::v-deep {
        .el-col {
          .el-form-item__content {
            border-right: 1px solid #EBEEFD;
          }
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none;
            }
          }
          &:last-child {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
